<template>
  <!-- 列表搜索组件 -->
  <SearchBar @onSearch="onSearch" />
  <!-- /列表搜索组件-->
  <el-button @click="cateAddShow = true">新增商品分类</el-button>
  <el-table :data="cates" style="width: 100%" row-key="id">
    <el-table-column prop="cateName" label="分类名" />
    <el-table-column prop="cateStatus" label="状态">
      <template #default="{ row }">
        <el-switch
          v-model="row.cateStatus"
          :active-value="0"
          :inactive-value="1"
          inline-prompt
          active-text="显示"
          inactive-text="隐藏"
          @change="changeStatus(row.id, row.cateStatus)"
        />
      </template>
    </el-table-column>
    <el-table-column prop="order" sortable label="排序">
      <template #default="{ row }">
        <el-input-number
          v-model="row.order"
          :min="0"
          :max="100"
          @change="setCateOrder(row.id, row.order)"
        />
      </template>
    </el-table-column>
    <el-table-column prop="cateIcon" label="图标">
      <template #default="{ row }">
        <el-image
          style="width: 50px; height: 50px"
          :src="row.cateIcon"
          preview-teleported
          :zoom-rate="1.2"
          :preview-src-list="[row.cateIcon]"
          fit="cover"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button @click="showUpdateDrawer(row.id)" type="primary">编辑</el-button>
        <el-button type="danger" @click="delCate(row.id)" v-haspermission="'cate/delete'"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 新增商品分类弹窗 -->
  <el-drawer v-model="cateAddShow" title="新增商品分类">
    <CateAdd />
  </el-drawer>
  <!-- /新增商品分类弹窗 -->
  <!-- 修改商品分类弹窗 -->
  <el-drawer v-model="cateUpdateShow" title="修改商品分类">
    <CateUpdate :cateId="cateId" />
  </el-drawer>
  <!-- /修改商品分类弹窗 -->
</template>

<script>
import { getCateLists, delCate, updateCate } from "@/api/cate";
import SearchBar from "@/components/SearchBar.vue";
import CateAdd from "./components/CateAdd.vue";
import CateUpdate from "./components/CateUpdate.vue";
export default {
  name: "CateLists",
  data() {
    return {
      cates: [],
      searchParams: {},
      cateAddShow: false,
      cateUpdateShow: false,
      cateId: -1,
    };
  },
  methods: {
    delCate(cateId) {
      // 确定弹窗
      this.$confirm("此操作会彻底删除该分类,继续吗?", "删除分类").then(() => {
        delCate(cateId).then((res) => {
          if (res.data.code === 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1500,
              onClose: () => {
                this.searchParams = {};
                this.fetchCates();
              },
            });
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          }
        });
      });
    },
    showUpdateDrawer(cateId) {
      // 点击编辑显示修改商品分类组件弹窗
      this.cateId = cateId;
      this.cateUpdateShow = true;
    },
    onSearch(searchParams) {
      this.searchParams = searchParams;
      this.fetchCates();
    },
    // 行内修改 商品的排序
    setCateOrder(cateId, order) {
      console.log(cateId, order);
      updateCate({
        id: cateId,
        order,
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            type: "success",
            message: res.data.msg,
            duration: 1500,
            onClose: () => {
              this.searchParams = {};
              this.fetchCates();
            },
          });
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
    // 行内修改商品分类的状态
    changeStatus(cateId, cateStatus) {
      console.log(cateId, cateStatus);
      updateCate({
        id: cateId,
        cateStatus,
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            type: "success",
            message: res.data.msg,
            duration: 1500,
            onClose: () => {
              this.searchParams = {};
              this.fetchCates();
            },
          });
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
    // 请求商品分类列表
    fetchCates() {
      getCateLists(this.searchParams).then((res) => {
        if (res.data.code === 200) {
          this.cates = res.data.data;
        }
      });
    },
  },
  created() {
    this.fetchCates();
  },
  components: { SearchBar, CateAdd, CateUpdate },
};
</script>

<style lang="scss" scoped></style>
